<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="收费设置">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="search" ref="search" slot="form" label-width="85px" label-position="left">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称：">
                            <!-- <el-select v-model="search.schoolName" filterable clearable remote reserve-keyword placeholder="请输入学校信息" :remote-method="remoteMethod" :loading="loading" style="width:100%">
                                <el-option v-for="item in schoolList" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select> -->
                            <school v-model="search.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col> 
                    <div class="top-seach">
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </div>
                </el-row>
                <!-- <div class="top-line">
                    
                </div> -->
            </el-form>
            <div class="table-title" slot="table-title">
                <el-button type="text" @click="btnFlowChart" class="btn-success">服务开通或修改流程说明</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" @expand="btnChild">
                <el-table-column type="expand">
                    <template scope="props">
                        <el-table :data="tableDataChild[props.$index]" style="width: 100%" :show-header="false">
                            <el-table-column prop="date" label="" width="48" ></el-table-column>
                            <el-table-column prop="date" label="" width="130" ></el-table-column>
                            <el-table-column label="服务名称" prop="sServiceName"></el-table-column>
                            <el-table-column label="收费金额（元）" prop="sMoney">
                                <template scope="scope">
                                    {{!scope.row.sMoney ? '0' : scope.row.sMoney}}
                                </template>
                            </el-table-column>
                            <el-table-column label="分成比例">
                                <template scope="scope">
                                    {{!scope.row.sDividedPercentage ? "未设置" : scope.row.sDividedPercentage + '%'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="收费方式">
                                <template scope="scope">
                                <!-- 1月收  2按学期收 3永久型 -->
                                    {{scope.row.sPayTypeNew == '1' ? '月收' :  scope.row.sPayTypeNew  == '2' ? '年收' : '--' }}
                                </template>
                            </el-table-column>
                            <el-table-column label="是否开通">
                                <template scope="scope">
                                <!-- 0:未开通 1审核中 2已开通 3审核未通过 -->
                                {{scope.row.sStatus == '0' ? '未开通' : scope.row.sStatus == '1' ? '审核中' : scope.row.sStatus == '2' ? '已开通' : scope.row.sStatus == '3' ? '审核未通过' :'未开通'}}
                            </template>
                            </el-table-column>
                            <el-table-column label="收费开始时间" prop="sPayStartTime">
                                <template scope="scope">
                                    {{!scope.row.sPayStartTime ? '未设置' : scope.row.sPayStartTime}}
                                </template>
                            </el-table-column>
                            <el-table-column label="申请开通时间" prop="sUpdateTime">
                                <template scope="scope">
                                    {{!scope.row.sUpdateTime ? '未开通' : scope.row.sUpdateTime}}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template scope="scope">
                                <el-button v-if="scope.row.sStatus == '0' || !scope.row.sStatus" type="text" class="btn-success" @click="openService(scope.row)" >申请开通</el-button>
                                <el-button v-else-if="scope.row.sStatus == '3'" type="text" class="btn-success" @click="afreshService(scope.row)" >重新开通</el-button>
                                <el-button v-else-if="scope.row.sStatus == '2'" type="text" class="btn-success" @click="modService(scope.row)" >修改</el-button>
                                <el-button v-else class="btn-success" type="text" @click="getService(scope.row)" >查看</el-button>
                                </template>  
                            </el-table-column>  
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="学校名称" prop="sSchoolName" width="130"></el-table-column>
                <el-table-column label="服务名称" prop="sServiceName"></el-table-column>
                <el-table-column label="收费金额（元）" prop="sOldMoney"></el-table-column>
                <el-table-column label="分成比例" prop="sDividedPercentage"></el-table-column>
                <el-table-column label="收费方式">
                  <template scope="scope">
                    <!-- 1月收  2按学期收 3永久型 -->
                        {{scope.row.sPayType == '1' ? '月收' :  scope.row.sPayType == '2' ? '按学期收' : scope.row.sPayType == '3' ? '永久型' : '' }}
                    </template>
                </el-table-column>
                <el-table-column label="是否开通">
                  <template scope="scope">
                    <!-- 0:未开通 1审核中 2已开通 3审核未通过 -->
                    {{scope.row.sStatus == '0' ? '未开通' : scope.row.sStatus == '1' ? '审核中' : scope.row.sStatus == '2' ? '已开通' : scope.row.sStatus == '3' ? '审核未通过' :''}}
                  </template>
                </el-table-column>
                <el-table-column label="收费开始时间" prop="sPayStartTime"></el-table-column>
                <el-table-column label="申请开通时间" prop="sCreateTime"></el-table-column>
                <el-table-column label="操作" ></el-table-column>
              </el-table>
              <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
            <newService v-if="state" :propsChild="propsChild"></newService>
            <getService v-if="getState" :getServiceChild="getServiceChild"></getService>
        </TableLayout>
    </div>
</template>
<script>
import school from 'components/SchoolClasss/school';
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import newService from './comps/newService';
import getService from './comps/getService';
import childTable from './comps/childTable';
import { listSchoolAllInfo, listPayRecordSchool, listServiceInfoById } from 'api/serviceManage';
export default {
    name: 'serviceConfig',
    components: { Levelbar, TableLayout, newService, getService, childTable, school },
    data() {
        return {
            loading: false,
            search: {
                schoolName: '',
                schoolId: ''
            },
            tableDataChild: [],
            listQuery: {
                page: 1,
                total: 1
            },
            tableData: [], // 外table

            propsChild: {
                obj: {}
            },
            getServiceChild: {
                obj: {}
            },
            state: false,
            getState: false
        };
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchTable();
        }
    },
    created() {
        this.searchTable();
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchTable();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchTable();
        },
        // 获取学校id 
        schoolChange(val) {
            this.search.schoolId = val
        },
        searchTable() {
            this.loading = true;
            listPayRecordSchool(
        !this.search.schoolId ? '' : this.search.schoolId,
        this.listQuery.page,
        this.config.pageSize
      )
        .then(data => {
            this.loading = false;
            this.tableData = [];
            if (data.data.content) {
                this.tableData = data.data.content.list;
                this.listQuery.total = data.data.content.pagination.total
            } else {
                this.tableData = [];
            }
        })
        .catch(Error => {
            this.loading = false;
            this.$message.error(Error);
        });
        },
        onSubmit() {
            this.searchTable();
        },
        remoteMethod(query) {
            if (query) {
                listSchoolAllInfo(query)
          .then(response => {
              this.schoolList = response.data.content;
              console.log(this.schoolList)
          })
          .catch(Error => {
              this.$message.error(Error);
          });
            } else {
                this.schoolList = [];
                this.search.schoolName = '';
                this.search.schoolId = '';
            }
        },
        btnFlowChart() {
            this.$router.push({ path: 'flowChart' });
        },
        btnChild(row, expanded) {
            if (expanded) {
                this.loading = true;
                listServiceInfoById(row.fSchoolId).then(data => {
                    this.loading = false;
                    if (data.data.content) {
                        // let dataAll = [];
                        // data.data.content.forEach(item => {
                        //     if (item.sServiceName !== '空中课堂') {
                        //         dataAll.push(item)
                        //     }
                        // })
                        let index = this.tableData.indexOf(row);
                        this.tableDataChild[index] = null;
                        this.tableDataChild.splice(index, 1, data.data.content);
                        // this.tableDataChild.splice(index, 1, dataAll);
                    }
                }).catch(Error => {
                    this.loading = false;
                    this.$message.error(Error)
                })
            }
        },
        // 申请开通
        openService(val) {
            this.$router.push({
                path: `newService/1/obj/true/${val.sMoney}/${val.sSchoolName}/${val.sServiceName}/${val.fSchoolId}/${val.fServiceId}`
                // path: `/serviceContent/newService/1/${true}/${val.sSchoolName}/${val.sServiceName}/${val.fSchoolId}`

                // 三个参数，sSchoolName:学校名称  && sServiceName:服务名称 && fSchoolId
            });
        },
    // 重新开通
        afreshService(val) {
            this.$router.push({
                path: `newService/2/${val.pId}/${false}/${val.sMoney}/${val.sSchoolName}/${val.sServiceName}/${val.fSchoolId}/${val.fServiceId}`
                // params: { state: '2', obj: val.pId, add: false }
            });
        },
    // 修改开通
        modService(val) {
            this.$router.push({
                path: `newService/3/${val.pId}/${false}/${val.sMoney}/${val.sSchoolName}/${val.sServiceName}/${val.fSchoolId}/${val.fServiceId}`
                // name: '服务开通',
                // params: { state: '3', obj: val.pId, add: false }
            });
        },

        // 查看开通
        getService(val) {
            this.$router.push({
                path: `getService/${val.pId}/${val.fServiceId}`
                // path: `newService/4/${val.pId}/${false}`
                // name: '服务开通',
                // params: { state: '4', obj: val.pId, add: false }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  .app-levelbar {
    height: 35px;
  }
  .el-form {
    background: #fff;
  }
}
.top-seach {
  float: right;
  padding-right: 20px;
  &::after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
  }
}
</style>
